<!-- src/views/file/FileUpload.vue -->
<script setup>
import { ref, watch } from 'vue'
import { Upload, Calendar } from '@element-plus/icons-vue'
import { ElMessage, ElForm } from 'element-plus'
import { uploadFileService } from '@/api/file'

// 表单数据
const formData = ref({
  file: null,
  type: '',
  area: '',
  date: '',
  fileDesc: ''
})

// 控制区域输入框的显示与隐藏
const showArea = ref(false)
const formRef = ref(null)

// 监听type变化，控制area的显示
watch(
  () => formData.value.type,
  (newVal) => {
    showArea.value = newVal === 'drone'
    if (!showArea.value) {
      formData.value.area = ''
    }
  }
)

// 表单验证规则
const rules = {
  file: [
    { required: true, message: '请选择要上传的文件', trigger: 'change' }
  ],
  type: [
    { required: true, message: '请选择数据类型', trigger: 'change' }
  ],
  area: [
    { required: showArea.value, message: '请输入区域信息', trigger: 'blur' }
  ],
  fileDesc: [{ max: 200, message: '文件描述不能超过200个字符', trigger: 'blur' }]
}

// 处理文件上传
const handleUpload = async () => {
  // 表单验证
  const valid = await formRef.value.validate()
  if (!valid) return

  // 创建FormData对象
  const data = new FormData()
  data.append('file', formData.value.file)
  data.append('type', formData.value.type)
  
  // 只有无人机类型才添加area参数
  if (showArea.value && formData.value.area) {
    data.append('area', formData.value.area)
  }
  
  data.append('date', formData.value.date)
  if (formData.value.fileDesc) {
    data.append('fileDesc', formData.value.fileDesc)
  }
  try {
    await uploadFileService(data)
    ElMessage.success('文件上传成功')
    // 重置表单
    formRef.value.resetFields()
    formData.value.file = null
  } catch (error) {
    ElMessage.error('文件上传失败：' + (error.message || '未知错误'))
  }
}

// 处理文件选择
const handleFileChange = (uploadFile) => {
  // 验证文件类型是否为zip
  if (uploadFile.raw && !uploadFile.name.endsWith('.zip')) {
    ElMessage.error('请上传zip格式的文件')
    formData.value.file = null
    return
  }
  formData.value.file = uploadFile.raw
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>文件上传</span>
      </div>
    </template>
    <el-row>
      <el-col :span="16">
        <el-form 
          ref="formRef"
          :model="formData" 
          :rules="rules" 
          label-width="120px" 
          size="large"
        >
          <!-- 文件上传 -->
          <el-form-item label="选择文件" prop="file">
            <el-upload
              class="upload-demo"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleFileChange"
              accept=".zip"
            >
              <el-button type="primary" :icon="Upload">选择ZIP文件</el-button>
              <div class="el-upload__text">支持上传.zip格式文件</div>
            </el-upload>
            <div v-if="formData.file" class="file-name">
              已选择: {{ formData.file.name }}
            </div>
          </el-form-item>

          <!-- 类型选择 -->
          <el-form-item label="数据类型" prop="type">
            <el-select v-model="formData.type" placeholder="请选择数据类型">
                 <el-option label="卫星" value="satellite"></el-option>
                 <el-option label="无人机" value="drone"></el-option>
            </el-select>
          </el-form-item>

          <!-- 区域输入（条件显示） -->
          <el-form-item v-if="showArea" label="区域" prop="area">
            <el-select v-model="formData.area" placeholder="请选择区域">
              <el-option label="哈达湾" value="hadawan"></el-option>
              <el-option label="鸟岛" value="niaodao"></el-option>
              <el-option label="布哈河口海北区" value="buhahekouhaibeiqu"></el-option>
              <el-option label="布哈河口海南区" value="buhahekouhainanqu"></el-option>
              <el-option label="泉湾" value="quanwan"></el-option>
              <el-option label="黑马河口" value="heimahekou"></el-option>
              <el-option label="沙柳河口" value="shaliuhekou"></el-option>
              <el-option label="泉吉河口" value="quanjihekou"></el-option>
              <el-option label="二郎剑" value="erlangjian"></el-option>
              <el-option label="一郎剑子湖" value="yilangjianzihu"></el-option>
              <el-option label="洱海" value="erhai"></el-option>
            </el-select>
          </el-form-item>

          <!-- 日期输入 -->
          <el-form-item label="日期" prop="date">
            <el-date-picker
                v-model="formData.date"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择数据采集时间"
                :prefix-icon="Calendar"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="文件描述" prop="fileDesc">
               <el-input
                   v-model="formData.fileDesc"
                   placeholder="可选，说明文件内容（如“2024年9月西湖卫星影像”）"
                   maxlength="200"
                 ></el-input>
             </el-form-item>

          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" size="large" @click="handleUpload">
              上传文件
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  padding: 20px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .file-name {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    word-break: break-all;
  }
}
</style>